<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!--引用CW标签  -->
<%@ taglib uri="/WEB-INF/taglib/cw" prefix="CW"%>
<!--引用struts标签  -->
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<base href="<%=basePath%>">
	<title></title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link href="<%=basePath%>css/en/edit.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="<%=basePath%>js/commons/common_edit.js"></script>
	<script type="text/javascript" src="<%=basePath%>js/commons/common_upload.js"></script>
	<script type="text/javascript" src="<%=basePath%>js/commons/common_dad.js"></script>
</head>
<body>
	<jsp:include page="../../common/loadingPage.jsp" />
	<form action="shop/insert.action" name="actionForm" id="actionForm" method="post">
		<div id="shopInfoDiv" style="width:100%;">
			<input name="shopInfo.img_view" id="fileFileName" type="hidden" />
			<!-- 页面头 -->
			<div class="pageheader">
				<!-- 操作按钮 -->
				<div class="pageheadercontent">
					<div class="toolbar">
						<div class="toolbarright">
							<input class="okbtn" type="button" value="下一步" onclick="__showImg()"> 
						</div>
					</div>
				</div>
			</div>
			<!-- 编辑 -->
			<div class="writetblbox">
				<table class="writetbl">
					<tr>
						<th style="width: 25%">名称：</th>
						<td colspan="2"><input name="shopInfo.s_name" type="text" id="s_name" ></td>
						<td style="width: 25%" rowspan="4">		
							<img style="top: 140px;position: fixed;left:77%;width:100px;height:100px;" alt='' src="images/untitled.png" class="writetblimg" id="imgid" title="点击上传缩略图">
	    					<input style="top: 140px;position: fixed;left:77%;width:100px;height:100px;" name="uploadFile" type="file" class="file" 
	    					id="uploadFile" accept="image/*" size="28" title="点击上传缩略图" onChange="return _imgUpload('uploadFile','imgid','fileFileName',1048576);"  />
							<div style="top:250px;position: fixed;left:75%;color:red;text-align:center;" >建议上传200*200分辨率</div>
						</td>
					</tr>
					<tr>
						<th>联系方式：</th>
						<td colspan="2"><input name="shopInfo.contact" type="text" ></td>
					</tr>
					<tr>
						<th>地址名称（无需填写省市）：</th>
						<td colspan="2"><input name="shopInfo.position" type="text"></td>
					</tr>
					<tr>
						<td colspan="3"><a href="#" onclick="findtude();return false;" style="text-decoration: none;color:#666">点击访问百度地图获取地址经纬度</a></td>
					</tr>
					<tr>
						<th>经度：</th>
						<td style="width: 25%"><input name="shopInfo.longitude" type="text"></td>
						<th style="width: 25%">纬度：</th>
						<td style="width: 25%"><input name="shopInfo.latitude" type="text" ></td>
					</tr>
					<tr>
						<th>商户类型：</th>
						<td colspan="3">
							<input type="hidden" id="stype" name="shopInfo.stype" />
						    <s:if test="stypes.size()>0">
	        					<s:iterator value="stypes" var="stype" status="status">
									<input type="checkbox" name="chk_list" id="chk_list_<s:property value="id" />" value="<s:property value="id" />" class="chk_list"/><s:property value="t_name" />
	        					</s:iterator>
	        				</s:if>
						</td>
					</tr>
					<tr>
						<th>备注：</th>
						<td colspan="3"><input type="text" name="shopInfo.introduction" ></td>
					</tr>
				</table>
			</div>
		</div>
		<!-- ===================================详情图片======================================== -->
		<div id="shopImgDiv" style="width:100%;display: none">
			<!-- 详情展示总个数，格式为0不能提交 -->
			<input name="imgViewCount" id="imgViewCount" type="hidden" value="0"/>
			<!-- 新增图片排序号字符串-->
			<input name="addList" id="addList" type="hidden" value=""/>
			<div class="pageheader">
				<!-- 操作按钮 -->
				<div class="pageheadercontent">
					<div class="toolbar">
						<div class="toolbarright">
							<input class="okbtn" type="button" value="上一步" onclick="__backInfo()"> 
							<input class="okbtn" type="button" value="下一步" onclick="__showAlay()"> 
						</div>
					</div>
				</div>
			</div>
			<div class="writetblbox boxdiv">
				<div class="w fl">
					<div class="box-title-div">商户详情图片：点击图片可拖拽调整顺序，建议分辨率为1080**,至多上传50张图片</div>
					<input type="button" value="删除" id="delPublicationBtn" class="delbtn fr"/>
					<div class="file-box">
						<input  type='button' class='ATTACHMENTbtn' value='添加' id="inputBton"/>
						<input  title="" name="uploadFileTop" type="file" class="file" id="uploadFileTop" accept="image/*" size="28" onChange="return fileupload('uploadFileTop');"  />
					</div>
				</div>
				<div class="dowebok w fl" id="myImgDivs">
				</div>
				<div class="boxdivfoot">
					<input type="button" value="删除" id="delPublicationBtn" class="delbtn fr"/>
					<div class="file-box">
						<input  type='button' class='ATTACHMENTbtn' value='添加' id="inputBton"/>
						<input  title="" name="uploadFileFoot" type="file" class="file" id="uploadFileFoot" accept="image/*" size="28" onChange="return fileupload('uploadFileFoot');"  />
					</div>
				</div>
			</div>
		</div>
		<!-- =====================================支付信息=================================== -->
		<div id="appalyDiv" style="width:100%;display: none">
			<div class="pageheader">
				<!-- 操作按钮 -->
				<div class="pageheadercontent">
					<div class="toolbar">
						<div class="toolbarright">
							<input class="okbtn" type="button" value="上一步" onclick="__backImg()"> 
							<input class="okbtn" type="button" value="提交" onclick="__submit()"> 
						</div>
					</div>
				</div>
			</div>
			<div class="writetblbox">
				<table class="writetbl">
					<tr>
						<td colspan="2" class="trTitle">银联信息</td>
					</tr>
					<tr>
						<th>银行：</th>
						<td><input name="shopData.bank_name" type="text" value="<s:property value="shopData.bank_name" />"></td>
					</tr>
					<tr>
						<th>用户名：</th>
						<td><input name="shopData.bank_user" type="text" value="<s:property value="shopData.bank_user" />"></td>
					</tr>
					<tr>
						<th>银行账号：</th>
						<td><input name="shopData.bank_account" type="text" value="<s:property value="shopData.bank_account" />"></td>
					</tr>
				</table>
			</div>
		</div>
	</form>
	<span class="_height"></span>
	<script type="text/javascript">
		var localUUID="";
		$(document).ready(function() {
			$('#actionForm').validate({
				rules : {
			        "shopInfo.s_name" : {
						required : true,
						maxlength : 64
					},
				    "shopInfo.contact" : {
				    	required : true,
				    	maxlength : 128
					},
					"shopInfo.position" : {
						required : true,
						maxlength: 256
					},
					"shopInfo.longitude" : {
				    	required : true,
				    	number : true,
				    	maxlength : 64
					},
					"shopInfo.latitude" : {
						required : true,
						number : true,
						maxlength: 64
					},
			        "shopData.bank_user" : {
						maxlength : 64
					},
				    "shopData.bank_name" : {
				    	maxlength : 128
					},
					"shopData.bank_account" : {
						number : true,
						maxlength: 128
					}
				}
			});
			$('.dowebok').dad({
				target:'table',
				draggable: 'td'
			});
			//删除tr
			$("#delPublicationBtn").bind("click", function(){ 
				var deleteCount=$("input[name='chk_list']:checked").size();
				$("input[name='chk_list']:checked").each(function(i){ 
					var uuid=$(this).val();
					if(localUUID.indexOf(uuid)!=-1){
					    localUUID=localUUID.replace(uuid,"");
					}
				});
				var viewCount=$("#imgViewCount").val();
				var imgCount=viewCount-deleteCount;
				$("#imgViewCount").val(imgCount);
			  	$("input[name='chk_list']:checked").parent().parent().remove(); 
				if(imgCount<50){
					$("#inputBton").attr("disabled",false);
			    }
				$('.dowebok').dad({
					target:'table',
					draggable: 'td'
				});
			});
		});
		//========================================================================================
		function _validateName(){
			var result=true;
			$.ajax({  
			    type: "post",  
			    async: false,
			    url: "<%=basePath%>/shopAjax/validateName.action",  
			    data: "t_name=" + $("#t_name").val() ,  
			    success: function(data){
			    	if(data=='fasle'){//重复
					    art.dialog.alert('该名称已经存在，请重新输入');
					    result=false;
			    	}
			    }
			});
			return result;
		}
		//获取被选中的checkbox的值
		function getCheckedValue(){
			var chk_list = document.getElementsByName('chk_list');
			var chkString = "";
			for(var i=0;i<chk_list.length;i++){
				if(chk_list[i].checked){
					 chkString =chk_list[i].value+","+chkString;
				}
			}
			return chkString.substring(0,chkString.length-1);
		}
		function __showImg(){
			if($("#actionForm").valid()&&_validateName()){
				var checkedValue=getCheckedValue();
				if(checkedValue==null||checkedValue==""){
					art.dialog.tips('请选择商户分类');
				}else{
					$("#stype").val(checkedValue);
					$("#shopImgDiv").show();
					$("#shopInfoDiv").hide();
				}
			} 
		}
		function findtude(){
			window.open("http://api.map.baidu.com/lbsapi/getpoint/index.html");
		}
		//========================================================================================
		function __backInfo(){
			$("#shopImgDiv").hide();
			$("#shopInfoDiv").show();
		}
		function __showAlay(){
			if($("#imgViewCount").val()==0){
				art.dialog.tips('请上传详情图片');
				return;
			} 
			var addList="";
			$("input[name='ImgViewList']").each(function(i){
				var imgId = $(this).attr("id").replace("ImgView","");
				var imgView = $(this).val();
				var type="update";
				if($(this).attr("addType")=="add"){
					type="add";
				}
				addList=addList+","+imgId+"#"+imgView+"#"+type;
			});
	   		$("#addList").val(addList);
			$("#shopImgDiv").hide();
			$("#appalyDiv").show();
		}
	     
	    function fileupload(tagName){
			var uuid=Math.uuid();
			//预设的支持的图片类型
			var imgFileType= "*.BMP;*.JPG;*.JPEG;*.PNG;*.GIF;";
			var filepath=$("#"+tagName).val();
			if(filepath==undefined||$.trim(filepath)==""){ 
		          art.dialog.tips('未上传图片！');
		          return false; 
		 	}else{ 
				var fileArr=filepath.split("//");
				var fileTArr=fileArr[fileArr.length-1].toUpperCase().split("."); 
				var filetype=fileTArr[fileTArr.length-1];
				//如果不为图片类型
				if(imgFileType.indexOf(filetype) == -1){
					art.dialog.tips('图片格式错误！');
					return false;  
		  		}
			} 
			$.ajaxFileUpload({
				url:"<%=basePath%>/SwfFileUpload",
				method:"post",
				secureuri:false,
				fileElementId : tagName,
				dataType: 'text/xml',			
				success: function (data) {
					var result = data.split("#");
					var path = result[1];//在临时文件库中的相对路径
					var fileSizeBytes = result[8];//文件大小 单位byte  
					if(fileSizeBytes>2097152){
				 		art.dialog.tips('上传图片不能超过2M，请重新输入');
					}else{
						//table新增行
		   				var str = "<table class='imgitem' id='"+uuid+"'><tr>";
		   				str = str+"<th><input type='checkbox' name='chk_list' id='chk_list_"+uuid+"' value='"+uuid+"' />";
		   				str = str+"<input type='hidden' name='ImgViewList' id='ImgView"+uuid+"' value="+path+" addType='add'/></th>";
		   				str = str+"<td><div><img id='img"+uuid+"' src='' ondragstart='return false'/></div></td>";
		   				str = str+"</tr></table>";
		   				$("#myImgDivs").append(str);
						var url = "<%=basePath%>/upload/getPriviewInpByPath.action?path="+ path;
						$("#img"+uuid).attr("src", url);
						$("#img"+uuid).show();
						var imgCount=$("#imgViewCount").val();
						imgCount++;
						$("#imgViewCount").val(imgCount);
						if(imgCount==50){
							$("#inputBton").attr("disabled",true);
						}
						$('.dowebok').dad({
							target:'table',
							draggable: 'td'
						});
					}
				},
				error : function(data) {
					art.dialog.tips('上传图片错误！');
				}
			});
		}
		//进图页面讲默认信息保存
		function _makeLoadeInfo(){
			$("input[name='localMark']").each(function(i){ 
				localUUID=localUUID+","+$(this).val();
			});
		}
		//========================================================================================
		function __backImg(){
			$("#appalyDiv").hide();
			$("#shopImgDiv").show();
		}
		function __submit(){
			if($("#actionForm").valid()){
				$("#loadingdiv").show();
				document.actionForm.submit();
			}
		}
	</script>
</body>
</html>
